<template>
  <div class="tree-box-wrap">
    <el-tree
        :default-checked-keys="['1001-1']"
        :data="data"
        :props="treeProp"
        :highlight-current="true"
        @node-click="handleNodeClick"
        :render-content="renderNodeContent"
        @node-contextmenu="openContextmenu">
    </el-tree>

  </div>
</template>

<script>
import {Treedata} from "@/components/tree/treedata";
export default {
  name: "MyTreeDemo",
  data() {
    return {
      data: [...Treedata],
      treeProp: {
        children: 'children',
        label: 'name'
      },
    }
  },
  methods: {
    handleNodeClick() {

    },
    renderNodeContent(h, {node, data, store}) {
      let iconClass = "";
      let styleStr = "";
      if (data.type === 'connection') {
        iconClass = 'mysql';
        styleStr = "width:1.3em;height:1.3em;";
      } else if (data.type === 'database') {
        iconClass = 'database';
        styleStr = "width:1.3em;height:1.3em;";
      }
      return h('span', {
            style: "display: flex;align-items: center;",
          },
          [
            h('svg-icon', {
              style: styleStr,
              props: {
                iconClass: iconClass
              }
            }),
            h('span', " "),
            h('span', {class: 'tree-node-text'}, data.text)
          ])
    },
    openContextmenu() {

    }
  }
}
</script>

<style scoped>
::v-deep .tree-node-text {
  font-size: 14px;
  margin-left: 5px;
  display: flex;
  align-items: center;
}

.db-tree-box {
  padding-top: 5px;
}

.tree-node-icon {
  width: 1.5em;
  height: 1.5em;
}

.tree-box-wrap {
  width: 300px;
}
</style>